<template>
	<view class="content">
		<view v-if="reportUndo.length" class="list">
			<view class="list-title">未报备名单：</view>
			<view class="list-item" v-for="(undoName,undoIdx) in reportUndo" :key="undoIdx">
			{{undoName}}
			</view>
			<!-- <view v-for="(undoName,undoIdx) in reportUndo" :key="undoIdx">{{undoName}}</view> -->
		</view>

		<view class="buttonGroup">
			<navigator :url="'/pages/report/do_report?report_id='+report_id" class="linkBtn">填写报备</navigator>
			<button class="do_report" :data-clipboard-text="url+'/#/pages/report/do_report?report_id='+report_id" @click="copyDoReport">点击复制给团体成员进行报备</button>
			<!-- <view class="text-area">点击上面的按钮，进入并分享给团体成员，进行填写！</view> -->
		</view>

		<view class="list">
			<view class="list-title">已报备列表：</view>
			<view class="list-item record_list"
				v-for="(reportDoneVal, reportDoneIdx) in reportDone"
				:key="reportDoneIdx">
				<navigator :url="'./record_detail?record_id='+reportDoneVal._id">{{reportDoneVal.person_name}}</navigator>
				<!-- <view>{{reportDoneVal.person_name}}</view> -->
				<view style="margin-left: 20rpx;">{{new Date(reportDoneVal.create_time).Format("MM-dd HH:mm")}}</view>
				<button class="mini" @click="rewriteRecord(reportDoneVal._id)">重填</button>
			</view>
		</view>

		<view class="list">
			<view class="list-title">导出报备</view>
			<view class="list-item">
				<text>选择日期：</text>
				<picker mode="date" @change="selectDateChange">
					<button size="mini">{{tipSelectDate||'请选择日期'}}</button>
				</picker>
			</view>
			<button style="width: 100%;" type="default" @click="exportReport">导出指定日期的报备</button>
		</view>

	</view>
</template>

<script>
	import Clipboard from 'clipboard';
	import '@/common/js/utils.js';

	export default {
		data() {
			return {
				url: "",
				report_id: "",
				reportDetail: {},
				reportDone: [],
				reportUndo: [],

				tipSelectDate: '',
			}
		},
		computed: {
			select_in_time: function() {
				return new Date(this.tipSelectDate).getTime()
			}
		},
		onLoad() {
		},
		created() {
			this.url = location.origin;
			this.report_id = this.$route.query.report_id
			this.getOneReport();
			// console.log(location);
		},
		methods: {
			copyDoReport() {
				var clipboard = new Clipboard('.do_report')
				clipboard.on('success', e => {
					uni.showToast({
						icon: 'none',
						title: '复制成功'
					});
					// 释放内存
					clipboard.destroy()
				})
				clipboard.on('error', e => {
					// 不支持复制
					uni.showToast({
						icon: 'none',
						title: '该浏览器不支持自动复制'
					});
					// 释放内存
					clipboard.destroy()
				})
			},
			getOneReport() {
				if (this.report_id) {
					uniCloud.callFunction({
						name: "ha_get_one_report",
						data: {
							report_id: this.report_id
						},
						success: ({result}) => {
							// console.log(result)

							if ( result.status === 0 ) {
								console.log(result.data)

								// this.reportDetail = result.data;
								this.reportDone = result.data.done;
								if (result.data.undo) {
									this.reportUndo = result.data.undo;
								}
							} else {
								uni.showToast({
									icon: 'none',
									title: `${result.msg || "网络异常，请稍后重试！"}`,
									duration: 1000
								});
							}
						},
						fail() {
							uni.showToast({
								icon: 'none',
								title: '网络异常，请稍后重试！'
							});
						}
					});
				}
			},
			rewriteRecord(record_id) {
				uniCloud.callFunction({
					name: "ha_update_record",
					data: {
						type: 0,
						record_id
					},
					success: ({result}) => {
						console.log(result);

						if ( result.status === 0 ) {
							uni.showToast({
								title: `${result.msg || "更新成功！"}`,
								duration: 1000
							});
							// location.reload();
						} else {
							uni.showToast({
								icon: 'none',
								title: `${result.msg || "网络异常，请稍后重试！"}`,
								duration: 1000
							});
						}
					},
					fail() {
						uni.showToast({
							icon: 'none',
							title: '网络异常，请稍后重试！'
						});
					}
				});
			},
			selectDateChange(e) {
				// console.log(e.detail);
				this.tipSelectDate = e.detail.value
			},
			exportReport() {
				// console.log(this.select_in_time);
				// console.log(this.tipSelectDate);
				if (!this.select_in_time) {
					uni.showToast({
						title: '请选择日期！',
						icon: 'none'
					})
					return;
				}
				if (this.report_id) {
					uniCloud.callFunction({
						name: "ha_get_record",
						data: {
							report_id: this.report_id,
							type: 0,
							create_time: this.select_in_time
						},
						success: ({result}) => {
							console.log(result)

							if ( result.status === 0 ) {
								// console.log(result.data)
								// this.export2Excel(result.data);
							} else {
								uni.showToast({
									icon: 'none',
									title: `${result.msg || "网络异常，请稍后重试！"}`,
									duration: 1000
								});
							}
						},
						fail() {
							uni.showToast({
								icon: 'none',
								title: '网络异常，请稍后重试！'
							});
						}
					});
				}
			},
			// export2Excel(jsonData) {
			// 	require.ensure([], () => {
			// 		const { export_json_to_excel } = require('@/common/js/excel/Export2Excel');
			// 		const tHeader = ['序号', 'IMSI', 'MSISDN', '证件号码', '姓名'];
			// 		const filterVal = ['ID', 'imsi', 'msisdn', 'address', 'name'];
			// 		const data = this.formatJson(filterVal, jsonData);
			// 		export_json_to_excel(tHeader, data, '列表excel');
			// 		})
			// },
			// formatJson(filterVal, jsonData) {
			// 	return jsonData.map(v => filterVal.map(j => v[j]))
			// }
		}
	}
</script>

<style>
	page {
		background: #f0f0f0;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 50upx;
	}

	.list {
		display: flex;
		flex-direction: column;
		width: 680upx;
		margin: auto;
		margin-top: 20upx;
		background: #ffffff;
		border-radius: 20upx;
		padding-bottom: 20upx;
	}

	.list-title {
		width: 580upx;
		padding: 20upx;
		display: flex;
		font-size: 40upx;
		font-weight: bold;
		border-bottom: #f0f0f0 1upx solid;
		margin: auto;
		margin-bottom: 20upx;

	}

	.list-item {
		width: 580upx;
		padding: 20upx;
		display: flex;
		margin: auto;
		font-size: 30upx;
		align-items: center;
	}

	.list-item input {
		background: #f0f0f0;
		border-radius: 10upx;
		padding-left: 20upx;
		padding-right: 20upx;
		width: 300upx;
		height: 60upx;
		color: #999999;
		font-size: 30upx;

	}

	.xiala {
		display: flex;
		background: #f0f0f0;
		padding: 10upx;
		border-radius: 10upx;
		color: #999999;
		font-size: 30upx;

	}

	.xiala image {
		display: flex;
		padding-top: 5upx;
		width: 30upx;
		height: 30upx;
		margin-left: 10upx;

	}

	.buttonGroup {
		width: 100%;
		margin-top: 30upx;
		margin-bottom: 30upx;
	}

	.buttonGroup .linkBtn {
		font-size: 30upx;
		display: block;
		line-height: 80upx;
		margin: 0 auto;
		width: 90%;
		text-align: center;
		margin-bottom: 20upx;
		border-radius: 40upx;
		box-shadow: 0 3px 5px rgba(5, 26, 180, 0.35);
		font-weight: bold;
		background: linear-gradient(135deg, #576fec 0%, #576fec 76%, #536dec 76%);
		color: #fff;
	}

	.text-area {
		text-align: center;
	}

	.record_list button {
		margin-right: 10rpx;
	}

</style>
